<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <style>
      li {
        overflow: hidden;
      }
      li img {
        width: 150px;
        height: 150px;
        float: left;
      }
    </style>
    <script>
      var firmList = [
        {
          url: 'https://pic.maizuo.com/usr/movie/ddd98af15ecd1336e87c054d366f9761.jpg?x-oss-process=image/quality,Q_70',
          title: '世间有她',
          grade: '7.5',
        },
        {
          url: 'https://pic.maizuo.com/usr/movie/ddd98af15ecd1336e87c054d366f9761.jpg?x-oss-process=image/quality,Q_70',
          title: '世间有她',
          grade: '7.5',
        },
        {
          url: 'https://pic.maizuo.com/usr/movie/ddd98af15ecd1336e87c054d366f9761.jpg?x-oss-process=image/quality,Q_70',
          title: '世间有她',
          grade: '7.5',
        },
      ]
      var firmItems = firmList.map(function (item) {
        return `<li>
          <img src="${item.url}" alt="">
          <h3>${item.title}</h3>
          <p>${item.grade}</p>
          `
      })
      console.log(firmItems.join(''))
      document.write(firmItems)
    </script>
  </body>
</html>
